<template>
  <div class="mani-content">
    <div class="top-box">
      <div class="title_1">{{data.scheme_name}}</div>
      <div class="title_2">稳定性设计方案</div>
    </div>
    <div class="button-box">
      <ul>
        <li>
          <div class="left-title">起草人</div>
          <div class="middle-title">：</div>
          <div class="right-title">{{data.creator_name}}</div>
        </li>
        <li>
          <div class="left-title">日期</div>
          <div class="middle-title">：</div>
          <div class="right-title">{{ dateFormat1('yyyy-mm-dd HH:MM:SS',data.created_at) }}</div>
        </li>
        <li>
          <div class="left-title">审核人</div>
          <div class="middle-title">：</div>
          <div class="right-title">
            {{listData.auditor}}
          </div>
        </li>
        <li>
          <div class="left-title">日期</div>
          <div class="middle-title">：</div>
          <div class="right-title">
            {{listData.updated_at}}
          </div>
        </li>
        <li>
          <div class="left-title">批准人</div>
          <div class="middle-title">：</div>
          <div class="right-title"></div>
        </li>
        <li>
          <div class="left-title">日期</div>
          <div class="middle-title">：</div>
          <div class="right-title"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { stabilityEditor } from '@/api/stability/giveUp'

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        listData :{}
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},

    //属性是手动定义的所需监听的值
    watch: {
      data:{
        handler(newVal,oldVal){
          if(newVal){
            if(newVal.id){
              this.handData(newVal.id)
            }

          }
        },
        deep:true,
        immediate:true
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      handData(id){
        stabilityEditor(id).then(res=>{
          if(res.code === 200){
            this.listData = res.data
          }
        })
      }
    }

  }

</script>

<style scoped>
  .top-box{
    margin-top:50px ;
    width: 100%;
    height: 500px;
    text-align: center;
  }
  .title_1{
    margin-top: 200px;
    font-size: 24px;
  }
  .title_2{
    margin-top: 20px;
    font-size: 24px;
  }
  .button-box{
    margin-top:50px ;
    width: 100%;
    height: 230px;
    text-align: center;
  }
  ul, li {
    list-style: none;
    padding: 0 !important;
    margin: 0;
  }
  ul{
    width: 100%;
    padding-left:20px ;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 50%;
    height: 50px;
    line-height: 50px;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    display: flex;
  }
  .left-title{
    width: 16%;
    padding-left:20px ;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
  }
  .middle-title{
    width: 3%;
  }
  .right-title{
    width: 70%;
    text-align: left;
    height: 40px;
    line-height:50px ;
    padding-left: 15px;
    border-bottom: 1px solid black;
  }
</style>
